<template>
  <div class="app-container">
    <el-tabs type="border-card" stretch>
      <el-tab-pane label="数据源">
        <el-tree
          :data="treeData"
          :props="defaultProps"
          @node-click="handleNodeClick"
          :default-expanded-keys="[2, 3]"
          :default-checked-keys="[5]"
        ></el-tree>
      </el-tab-pane>
      <el-tab-pane label="数据分析"> </el-tab-pane>
    </el-tabs>

    <el-tabs
      v-model="editableTabsValue"
      type="card"
      editable
      @edit="handleTabsEdit"
    >
      <el-tabs
        v-model="editableTabsValue"
        type="card"
        editable
        @edit="handleTabsEdit"
      >
        <el-tab-pane
          :key="item.id"
          v-for="item in editableTabs"
          :label="item.driverName"
          :name="item.id"
        >
          <el-table :data="tableData" style="width: 100%" border>
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址"> </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-tabs>
  </div>
</template>

<script>
import { getList } from "@/api/data";
import axios from "axios";
export default {
  name: "Guide",
  data() {
    return {
      BASE_URL: "http://www.septic-tank.cn:8888/",
      treeData: [],
      editableTabs: [],
      editableTabsValue: "2",
      defaultProps: {
        children: "children",
        label: "driverName",
      },
      listQuery: {
        page: 1,
        limit: 10,
      },
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },

  created() {
    this.getList();
  },

  methods: {
    handleTabsEdit() {},
    handleNodeClick(data) {
      this.editableTabs.push(data);
    },
    getList() {
      axios
        .get(this.BASE_URL + "/auto_report/driver/list", {
          params: this.listQuery,
        })
        .then((dt) => {
          this.treeData = dt.data.data;
        });
    },

    guide() {
      this.driver.defineSteps(steps);
      this.driver.start();
    },
  },
};
</script>
<style  scoped>
.app-container {
  display: flex;
}
</style>
<style >
.el-tabs__content {
  height: 700px !important;
  max-height: 700px;
  overflow: auto;
}
</style>
